<template>
  <div class="portrait-manage">
    <div class="page-header">
      <h2>学生画像管理</h2>
      <div class="header-actions">
        <el-select v-model="selectedClass" placeholder="选择班级" clearable>
          <el-option
            v-for="option in classOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <el-input
          v-model="searchQuery"
          placeholder="搜索学生姓名/学号"
          prefix-icon="el-icon-search"
          clearable
          class="search-input"
        />
      </div>
    </div>

    <!-- 基本信息卡片 -->
    <div class="basic-info-card">
      <div class="student-info">
        <div class="avatar">
          <el-avatar :size="80" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
        </div>
        <div class="info-content">
          <h3>张三</h3>
          <p>学号：2021146001</p>
          <p>班级：计算机科学与技术1班</p>
        </div>
        <div class="status-tags">
          <el-tag type="success">学习状态良好</el-tag>
          <el-tag type="warning">需要关注</el-tag>
        </div>
      </div>
    </div>

    <!-- 三个分析卡片 -->
    <div class="analysis-cards">
      <CareerPredictionCard />
      <InterdisciplinaryCard />
      <SocialNetworkCard />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CareerPredictionCard from '../../components/profileCards/CareerPredictionCard.vue';
import InterdisciplinaryCard from '../../components/profileCards/InterdisciplinaryCard.vue';
import SocialNetworkCard from '../../components/profileCards/SocialNetworkCard.vue';

const selectedClass = ref('');
const searchQuery = ref('');
const classOptions = [
  { value: '计科1班', label: '计算机科学与技术1班' },
  { value: '计科2班', label: '计算机科学与技术2班' },
  { value: '软工1班', label: '软件工程1班' },
];
</script>

<style lang="less" scoped>
.portrait-manage {
  padding: 20px;
  background-color: #fff;
  min-height: 100%;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      color: #303133;
      font-size: 24px;
      font-weight: 500;
    }

    .header-actions {
      display: flex;
      gap: 15px;

      .el-select {
        width: 200px;
      }

      .search-input {
        width: 250px;
      }
    }
  }

  .basic-info-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .student-info {
      display: flex;
      align-items: center;
      gap: 24px;

      .info-content {
        flex: 1;

        h3 {
          margin: 0 0 8px;
          color: #303133;
          font-size: 20px;
        }

        p {
          margin: 4px 0;
          color: #606266;
        }
      }

      .status-tags {
        display: flex;
        gap: 10px;
      }
    }
  }

  .analysis-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;

    :deep(.career-card),
    :deep(.interdisciplinary-card),
    :deep(.social-network-card) {
      height: auto;
      min-height: 480px;
    }
  }
}
</style> 